﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>布局与网格 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#layout-and-grid-system" class="nav-link font-weight-bold"><span>布局与网格</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#how-it-works" class="nav-link"><span>工作原理</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#containers-b-container" class="nav-link"><span>容器 &lt;b-container&gt;</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#default-container" class="nav-link"><span>默认容器</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#fluid-width-container" class="nav-link"><span>弹性容器</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#responsive-fluid-containers" class="nav-link"><span>响应式液体容器</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#rows-b-row-and-b-form-row" class="nav-link"><span>Rows &lt;b-row&gt;和&lt;b-form-row&gt;</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#columns-b-col" class="nav-link"><span>Columns &lt;b-col&gt;</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#grid-options" class="nav-link"><span>网格选项</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#auto-layout-columns" class="nav-link"><span>自动布局列</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#equal-width-columns" class="nav-link"><span>等宽列</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#equal-width-multi-line" class="nav-link"><span>等宽多行</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#setting-one-column-width" class="nav-link"><span>设置一列宽度</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#variable-width-content" class="nav-link"><span>可变宽度内容</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#responsive-classes" class="nav-link"><span>响应类</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#all-breakpoints" class="nav-link"><span>所有断点</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#stacked-to-horizontal" class="nav-link"><span>堆叠到水平</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#mix-and-match" class="nav-link"><span>混搭</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#alignment" class="nav-link"><span>对齐</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#vertical-alignment" class="nav-link"><span>垂直对齐</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#horizontal-alignment" class="nav-link"><span>水平对齐</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#reordering" class="nav-link"><span>重新排序</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#ordering-columns" class="nav-link"><span>排序列</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#offsetting-columns" class="nav-link"><span>偏移列</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#margin-utilities-on-columns" class="nav-link"><span>列上的边距实用程序</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#nesting-grids" class="nav-link"><span>嵌套网格</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#row-columns" class="nav-link"><span>行列</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#utilities-for-layout" class="nav-link"><span>布局实用程序</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#changing-display" class="nav-link"><span>变更 display</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#flexbox-options" class="nav-link"><span>Flexbox 选项</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#margin-and-padding" class="nav-link"><span>边距和填充</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#toggle-visibility" class="nav-link"><span>切换可见性</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件引用</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-container" class="nav-link"><span>&lt;b-container&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-row" class="nav-link"><span>&lt;b-row&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-col" class="nav-link"><span>&lt;b-col&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-form-row" class="nav-link"><span>&lt;b-form-row&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">布局与网格</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">布局与网格(Layout and Grid System)</h1>
<p class="bd-lead">
  使用功能强大的mobile first flexbox网格（通过<code translate="no" class="notranslate text-nowrap">&lt;b-container&gt;</code>, 
  <code translate="no" class="notranslate text-nowrap">&lt;b-row&gt;</code>, 
  <code translate="no" class="notranslate text-nowrap">&lt;b-form-row&gt;</code>和 
  <code translate="no" class="notranslate text-nowrap">&lt;b-col&gt;</code>组件）构建所有形状和大小的布局，这得益于12列系统、5个默认响应层、CSS Sass变量和混合以及数十个预定义类。
</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>






<nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#how-it-works" class=""><span data-v-811345e6="">How it works</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#containers-b-container" class=""><span data-v-811345e6="">Containers &lt;b-container&gt;</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#default-container" class=""><span data-v-811345e6="">Default container</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#fluid-width-container" class=""><span data-v-811345e6="">Fluid width container</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#responsive-fluid-containers" class=""><span data-v-811345e6="">Responsive fluid containers</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#rows-b-row-and-b-form-row" class=""><span data-v-811345e6="">Rows &lt;b-row&gt; and &lt;b-form-row&gt;</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#columns-b-col" class=""><span data-v-811345e6="">Columns &lt;b-col&gt;</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#grid-options" class=""><span data-v-811345e6="">Grid options</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#auto-layout-columns" class=""><span data-v-811345e6="">Auto-layout columns</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#equal-width-columns" class=""><span data-v-811345e6="">Equal-width columns</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#equal-width-multi-line" class=""><span data-v-811345e6="">Equal-width multi-line</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#setting-one-column-width" class=""><span data-v-811345e6="">Setting one column width</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#variable-width-content" class=""><span data-v-811345e6="">Variable width content</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#responsive-classes" class=""><span data-v-811345e6="">Responsive classes</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#all-breakpoints" class=""><span data-v-811345e6="">All breakpoints</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#stacked-to-horizontal" class=""><span data-v-811345e6="">Stacked to horizontal</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#mix-and-match" class=""><span data-v-811345e6="">Mix and match</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#alignment" class=""><span data-v-811345e6="">Alignment</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#vertical-alignment" class=""><span data-v-811345e6="">Vertical alignment</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#horizontal-alignment" class=""><span data-v-811345e6="">Horizontal alignment</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#reordering" class=""><span data-v-811345e6="">Reordering</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#ordering-columns" class=""><span data-v-811345e6="">Ordering columns</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#offsetting-columns" class=""><span data-v-811345e6="">Offsetting columns</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#margin-utilities-on-columns" class=""><span data-v-811345e6="">Margin utilities on columns</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#nesting-grids" class=""><span data-v-811345e6="">Nesting grids</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#row-columns" class=""><span data-v-811345e6="">Row columns</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#utilities-for-layout" class=""><span data-v-811345e6="">Utilities for layout</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#changing-display" class=""><span data-v-811345e6="">Changing display</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#flexbox-options" class=""><span data-v-811345e6="">Flexbox options</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#margin-and-padding" class=""><span data-v-811345e6="">Margin and padding</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#toggle-visibility" class=""><span data-v-811345e6="">Toggle visibility</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">Component reference</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-container" class=""><span data-v-811345e6="">&lt;b-container&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-row" class=""><span data-v-811345e6="">&lt;b-row&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-col" class=""><span data-v-811345e6="">&lt;b-col&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-form-row" class=""><span data-v-811345e6="">&lt;b-form-row&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">Importing individual components</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">Importing as a Vue.js plugin</span></a></li>
</ul>
</li>
</ul>
</nav>
<p>
  BootstrapVue提供了一些为布局定制的方便的功能组件，与传统的Bootstrap v4标记相比，它可以简化复杂的页面标记。
  可以在传统的Bootstrap v4标记（即<code translate="no" class="notranslate text-nowrap">&lt;div&gt;</code>s和类）和BootstrapVue方便的功能布局组件之间来回切换。
</p>
<h2 id="how-it-works" class="bv-no-focus-ring"><span class="bd-content-title">工作原理<a class="anchorjs-link" href="#how-it-works" aria-labelledby="how-it-works"></a></span></h2>
<p>
  Bootstrap的网格系统使用一系列容器、行和列来布局和对齐内容。
  它是用<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" target="_blank" rel="noopener">flexbox</a>制造的，完全响应。下面是一个例子，深入了解网格是如何组合在一起的。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-grid-how-it-works notranslate">
<div class="bv-example-row container">
<div class="row">
<div class="col">1 of 3</div>
<div class="col">2 of 3</div>
<div class="col">3 of 3</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>1 of 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>2 of 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>3 of 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<p>
  上面的示例使用Bootstrap v4的预定义网格类在小型、中型、大型和特大型设备上创建三个等宽列。这些列在页面中以parent <code translate="no" class="notranslate text-nowrap">.container</code>居中。
</p>
<p>分解它，它的工作原理如下：</p>
<ul>
<li>
  容器提供了一种将网站内容居中并水平放置的方法。对于响应像素宽度，使用<code translate="no" class="notranslate text-nowrap">&lt;b-container&gt;</code>；对于宽度，
  使用 <code translate="no" class="notranslate text-nowrap">&lt;b-container fluid&gt;</code>；对于所有视窗和设备大小，使用<code translate="no" class="notranslate text-nowrap">width: 100%</code>。
</li>
<li>
  行是列的包装。每列都有用于控制它们之间的空间的水平<code translate="no" class="notranslate text-nowrap">padding</code>（称为边沟）。
  然后在具有负边距的行上抵消此<code translate="no" class="notranslate text-nowrap">padding</code>。这样，您的列中的所有内容在视觉上都在左侧对齐。
</li>
<li>在网格布局中，内容必须放在列中，并且只有列可以是行的直接子级。</li>
<li>
  由于flexbox，没有设置宽度的网格列将自动以相等的宽度进行布局。例如，对于小断点，四个<code translate="no" class="notranslate text-nowrap">&lt;b-col sm="auto"&gt;</code>实例的宽度将自动为25%。
</li>
<li>
  Column 属性 <code translate="no" class="notranslate text-nowrap">cols</code>指示在每行可能使用的12个列中，
  不管断点是什么（从断点<code translate="no" class="notranslate text-nowrap">xs</code>开始）。因此，如果希望在任何断点处有三个等宽列，
  可以使用<code translate="no" class="notranslate text-nowrap">&lt;b-col cols="4"&gt;</code>。
</li>
<li>
  列属性 <code translate="no" class="notranslate text-nowrap">sm</code>, 
  <code translate="no" class="notranslate text-nowrap">md</code>, 
  <code translate="no" class="notranslate text-nowrap">lg</code>, 
  <code translate="no" class="notranslate text-nowrap">xl</code>表示在不同断点处，每行可能使用12个列中要使用的列数。因此，如果在断点<code translate="no" class="notranslate text-nowrap">sm</code>处需要三个等宽列，
  可以使用<code translate="no" class="notranslate text-nowrap">&lt;b-col sm="4"&gt;</code>。特殊值<code translate="no" class="notranslate text-nowrap">auto</code>可用于占用行中剩余的可用列空间。
</li>
<li>
  列<code translate="no" class="notranslate text-nowrap">宽</code>是按百分比设置的，因此它们总是相对于其父元素流动和调整大小。
</li>
<li>
  列具有水平<code translate="no" class="notranslate text-nowrap">padding</code>以在各个列之间创建装订线，但是，
  可以通过在<code translate="no" class="notranslate text-nowrap">&lt;b-row&gt;</code>上设置<code translate="no" class="notranslate text-nowrap">no-gutters</code>属性来删除
  <code translate="no" class="notranslate text-nowrap">&lt;b-row&gt;</code>
  的边距和<code translate="no" class="notranslate text-nowrap">&lt;b-col&gt;</code>的<code translate="no" class="notranslate text-nowrap">padding</code>。
</li>
<li>要使网格响应，有五个网格断点，每个断点对应一个：所有断点（超小断点）、小断点、中断点、大断点和超大断点。</li>
<li>
  网格断点基于最小宽度的媒体查询，这意味着<strong>它们适用于该断点及其上的所有断点</strong>（例如，<code translate="no" class="notranslate text-nowrap">&lt;b-col sm="4"&gt;</code>>适用于小型、中型、大型和
  特大型设备，但不适用于第一个<code translate="no" class="notranslate text-nowrap">xs</code>断点）。
</li>
<li>您可以使用预定义的网格类或Sass混合来进行更多的语义标记。</li>
</ul>
<p>
  请注意<a href="https://github.com/philipwalton/flexbugs" target="_blank" rel="noopener">flexbox的局限性和错误</a>，
  例如<a href="https://github.com/philipwalton/flexbugs#flexbug-9" target="_blank" rel="noopener">无法将某些HTML元素用作flex容器</a>。
</p>
<h2 id="containers-b-container" class="bv-no-focus-ring"><span class="bd-content-title">容器 <code translate="no" class="notranslate text-nowrap">&lt;b-container&gt;</code><a class="anchorjs-link" href="#containers-b-container" aria-labelledby="containers-b-container"></a></span></h2>
<p>
  容器（<code translate="no" class="notranslate text-nowrap">&lt;b-container&gt;</code>）是引导中最基本的布局元素。
  默认情况下，可以从响应的固定宽度容器（意味着每个断点处的<code translate="no" class="notranslate text-nowrap">max-width</code>更改）或通过设置“流体”属性选择流体宽度（意味着始终100%宽），
  也可以从响应容器（容器在特定断点之前是流体）中选择（需要引导CSS <code translate="no" class="notranslate text-nowrap">v4.4+</code>）。
</p>
<p>虽然可以嵌套容器，但大多数布局不需要嵌套容器。</p>
<p>
  可以使用Bootstrap V4.x SCSS变量配置默认断点宽度。有关其他详细信息，请参见 <a href="../../../bootstrap-vue/docs/reference/theming" class="font-weight-bold">主题</a>参考页和
  下面 <a href="#grid-options" class="font-weight-bold">网格选项</a> 部分中的表。
</p>
<h3 id="default-container" class="bv-no-focus-ring"><span class="bd-content-title">默认容器<a class="anchorjs-link" href="#default-container" aria-labelledby="default-container"></a></span></h3>
<p>
  默认的<code translate="no" class="notranslate text-nowrap">&lt;b-container&gt;</code>是一个响应的、固定宽度的容器，这意味着它的<code translate="no" class="notranslate text-nowrap">max-width</code>在每个视窗宽度断点处发生变化。
</p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span>&gt;</span>
  <span class="hljs-comment">&lt;!-- Content here --&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<h3 id="fluid-width-container" class="bv-no-focus-ring"><span class="bd-content-title">弹性容器<a class="anchorjs-link" href="#fluid-width-container" aria-labelledby="fluid-width-container"></a></span></h3>
<p>
  在 <code translate="no" class="notranslate text-nowrap">&lt;b-container&gt;</code>上使用<code translate="no" class="notranslate text-nowrap">fluid</code>属性将呈现始终为100%宽度的容器，而不考虑视口断点。
</p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>&gt;</span>
  <span class="hljs-comment">&lt;!-- Content here --&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<p>
  将<code translate="no" class="notranslate text-nowrap">fluid</code>属性设置为true（或空字符串）相当于Bootstrap<code translate="no" class="notranslate text-nowrap">.container-fluid</code>类。
</p>
<h3 id="responsive-fluid-containers" class="bv-no-focus-ring"><span class="bd-content-title">响应式液体容器<a class="anchorjs-link" href="#responsive-fluid-containers" aria-labelledby="responsive-fluid-containers"></a></span></h3>
<p><span class="badge badge-info small">Requires Bootstrap v4.4+ CSS</span></p>
<p>
  响应容器是Bootstrap v4.4中的新功能。它们允许您指定一个100%宽度（fluid）的容器，直到达到特定的断点，此时应用<code translate="no" class="notranslate text-nowrap">max-width</code>。例如，
  将“prop <code translate="no" class="notranslate text-nowrap">fluid</code>”设置为<code translate="no" class="notranslate text-nowrap">'md'</code>将呈现一个100%宽的容器，
  直到到达<code translate="no" class="notranslate text-nowrap">'md'</code>断点，此时它将保持在该断点的容器<code translate="no" class="notranslate text-nowrap">max-width</code>。
</p>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>=<span class="hljs-string">"sm"</span>&gt;</span>
  100% wide until small breakpoint
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>=<span class="hljs-string">"md"</span>&gt;</span>
  100% wide until medium breakpoint
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>=<span class="hljs-string">"lg"</span>&gt;</span>
  100% wide until large breakpoint
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>=<span class="hljs-string">"xl"</span>&gt;</span>
  100% wide until extra large breakpoint
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<p>
  将fluid prop设置为断点名称将转换为Bootstrap类<code translate="no" class="notranslate text-nowrap">.container-{breakpoint}</code>。
</p>
<h2 id="rows-b-row-and-b-form-row" class="bv-no-focus-ring"><span class="bd-content-title">rows <code translate="no" class="notranslate text-nowrap">&lt;b-row&gt;</code> 和 <code translate="no" class="notranslate text-nowrap">&lt;b-form-row&gt;</code><a class="anchorjs-link" href="#rows-b-row-and-b-form-row" aria-labelledby="rows-b-row-and-b-form-row"></a></span></h2>
<p>
  行是<a href="#columns-b-col" class="font-weight-bold">columns</a>的包装。每列都有用于控制它们之间的空间的水平填充（称为边沟）。然后在具有负边距的行上抵消此填充。这样，您的列中的所有内容在视觉上都在左侧对齐。
</p>
<p>
  通过将<code translate="no" class="notranslate text-nowrap">no-gutters</code>属性设置为<code translate="no" class="notranslate text-nowrap">&lt;b-row&gt;</code>，可以从<code translate="no" class="notranslate text-nowrap">&lt;b-row&gt;</code>移除
  边距，从<code translate="no" class="notranslate text-nowrap">&lt;b-col&gt;</code>移除填充。
</p>
<p>
  或者，对于紧凑的边距（列之间较小的排水沟），使用<code translate="no" class="notranslate text-nowrap">&lt;b-form-row&gt;</code>组件，该组件通常在布局<a href="../../../bootstrap-vue/docs/components/form" class="font-weight-bold">forms</a>时使用。
</p>
<h2 id="columns-b-col" class="bv-no-focus-ring"><span class="bd-content-title">columns <code translate="no" class="notranslate text-nowrap">&lt;b-col&gt;</code><a class="anchorjs-link" href="#columns-b-col" aria-labelledby="columns-b-col"></a></span></h2>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-col&gt;</code>必须放在<code translate="no" class="notranslate text-nowrap">&lt;b-row&gt;</code>组件
  或应用了类<code translate="no" class="notranslate text-nowrap">row</code>的元素（例如<code translate="no" class="notranslate text-nowrap">&lt;div&gt;</code>）中，
  ，如果是<a href="../../../bootstrap-vue/docs/components/form" class="font-weight-bold">forms</a>，
  则放置在<code translate="no" class="notranslate text-nowrap">&lt;b-form-row&gt;</code>组件（以获取具有更紧凑边距的列）。
</p>
<h2 id="grid-options" class="bv-no-focus-ring"><span class="bd-content-title">网格选项<a class="anchorjs-link" href="#grid-options" aria-labelledby="grid-options"></a></span></h2>
<p>
  引导程序使用<code translate="no" class="notranslate text-nowrap">em</code> 或<code translate="no" class="notranslate text-nowrap">rem</code>单位来定义大多数大小，
  而 <code translate="no" class="notranslate text-nowrap">px</code>则用于网格断点和容器宽度。这是因为视区宽度是以像素为单位的，并且不随<a href="https://drafts.csswg.org/mediaqueries-3/#units" target="_blank" rel="noopener">字体大小</a>而改变。
</p>
<p>借助便捷的表格，了解Bootstrap网格系统在多个设备上如何工作。</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
<th> <strong>特效</strong> (xs)<br>
<code class="notranslate" translate="no">&lt;576px</code> </th>
<th> <strong>小</strong> (sm)<br>
<code class="notranslate" translate="no">≥576px</code> </th>
<th> <strong>中等</strong> (md)<br>
<code class="notranslate" translate="no">≥768px</code> </th>
<th> <strong>大</strong> (lg)<br>
<code class="notranslate" translate="no">≥992px</code> </th>
<th> <strong>特大</strong> (xl)<br>
<code class="notranslate" translate="no">≥1200px</code> </th>
</tr>
</thead>
<tbody>
<tr>
<th class="text-left">最大容器宽度</th>
<td>None (auto)</td>
<td>540px</td>
<td>720px</td>
<td>960px</td>
<td>1140px</td>
</tr>
<tr>
<th class="text-left">属性</th>
<td><code class="notranslate" translate="no">cols="*"</code></td>
<td><code class="notranslate" translate="no">sm="*"</code></td>
<td><code class="notranslate" translate="no">md="*"</code></td>
<td><code class="notranslate" translate="no">lg="*"</code></td>
<td><code class="notranslate" translate="no">xl="*"</code></td>
</tr>
<tr>
<th class="text-left">列数</th>
<td colspan="5">12</td>
</tr>
<tr>
<th class="text-left">Gutter 宽度</th>
<td colspan="5">30px (15px on each side of a column)</td>
</tr>
<tr>
<th class="text-left">可嵌套</th>
<td colspan="5">Yes</td>
</tr>
<tr>
<th class="text-left">偏移量</th>
<td><code class="notranslate" translate="no">offset="*"</code></td>
<td><code class="notranslate" translate="no">offset-sm="*"</code></td>
<td><code class="notranslate" translate="no">offset-md="*"</code></td>
<td><code class="notranslate" translate="no">offset-lg="*"</code></td>
<td><code class="notranslate" translate="no">offset-xl="*"</code></td>
</tr>
<tr>
<th class="text-left">命令</th>
<td><code class="notranslate" translate="no">order="*"</code></td>
<td><code class="notranslate" translate="no">order-sm="*"</code></td>
<td><code class="notranslate" translate="no">order-md="*"</code></td>
<td><code class="notranslate" translate="no">order-lg="*"</code></td>
<td><code class="notranslate" translate="no">order-xl="*"</code></td>
</tr>
</tbody>
</table>
<p><strong>注意事项:</strong></p>
<ul>
<li>
  没有<code translate="no" class="notranslate text-nowrap">xs</code>属性。<code translate="no" class="notranslate text-nowrap">cols</code>属性
  引用<code translate="no" class="notranslate text-nowrap">xs</code>（最小）断点。
</li>
<li>
  上面的断点值和名称是引导默认值。它们可以通过 <a href="../../../bootstrap-vue/docs/reference/theming" class="font-weight-bold">SCSS 变量</a>和（如果也使用自定义断点名称）
  通过BootstrapVue<a href="../../../bootstrap-vue/docs/misc/settings" class="font-weight-bold">全局配置</a>进行自定义。
</li>
</ul>
<h2 id="auto-layout-columns" class="bv-no-focus-ring"><span class="bd-content-title">自动布局列<a class="anchorjs-link" href="#auto-layout-columns" aria-labelledby="auto-layout-columns"></a></span></h2>
<p>
  利用特定于断点的列类来轻松进行列大小调整，而无需像<code translate="no" class="notranslate text-nowrap">&lt;b-col sm="6"&gt;</code>这样的显式编号的属性。
</p>
<h3 id="equal-width-columns" class="bv-no-focus-ring"><span class="bd-content-title">等宽列<a class="anchorjs-link" href="#equal-width-columns" aria-labelledby="equal-width-columns"></a></span></h3>
<p>
  例如，以下是两个网格布局，它们适用于从<code translate="no" class="notranslate text-nowrap">xs</code>到<code translate="no" class="notranslate text-nowrap">xl</code>的每个设备和视口。 为所需的每个断点添加任意数量的无单元类，每列的宽度将相同。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-grid-equal-width notranslate">
<div class="bv-example-row container">
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row">
<div class="col">1 of 3</div>
<div class="col">2 of 3</div>
<div class="col">3 of 3</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>1 of 2<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>2 of 2<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>1 of 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>2 of 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>3 of 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<h3 id="equal-width-multi-line" class="bv-no-focus-ring"><span class="bd-content-title">等宽多行<a class="anchorjs-link" href="#equal-width-multi-line" aria-labelledby="equal-width-multi-line"></a></span></h3>
<p>
  通过插入<code translate="no" class="notranslate text-nowrap">.w-100</code>来创建跨越多行的等宽列，在该行中您希望列换行到新行。 通过将<code translate="no" class="notranslate text-nowrap">.w-100</code>
  与一些<a href="https://getbootstrap.com/docs/4.3/utilities/display/" target="_blank" rel="noopener">响应性显示实用程序</a>混合在一起，使响应具有响应性。
</p>
<p>
  有一个<a href="https://github.com/philipwalton/flexbugs#flexbug-11" target="_blank" rel="noopener">Safari flexbox 错误</a>，
  使它无法在没有明确的<code translate="no" class="notranslate text-nowrap">flex-basis</code>或
  <code translate="no" class="notranslate text-nowrap">边框</code>的情况下工作。
  对于较旧的浏览器版本，有一些解决方法，但是如果目标浏览器不属于多虫的版本，则不必这样做。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-grid-equal-width-multiple-lines notranslate">
<div class="bv-example-row container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w-100"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<h3 id="setting-one-column-width" class="bv-no-focus-ring"><span class="bd-content-title">设置一列宽度<a class="anchorjs-link" href="#setting-one-column-width" aria-labelledby="setting-one-column-width"></a></span></h3>
<p>Flexbox网格列的自动布局还意味着您可以设置一列的宽度，并使同级列在其周围自动调整大小。 您可以使用预定义的网格类（如下所示），网格混合或内联宽度。 请注意，无论中间列的宽度如何，其他列都会调整大小。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-grid-one-width notranslate">
<div class="bv-example-row container">
<div class="row text-center">
<div class="col">1 of 3</div>
<div class="col-8">2 of 3 (wider)</div>
<div class="col">3 of 3</div>
</div>
<div class="row text-center">
<div class="col">1 of 3</div>
<div class="col-5">2 of 3 (wider)</div>
<div class="col">3 of 3</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>1 of 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"8"</span>&gt;</span>2 of 3 (wider)<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>3 of 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>1 of 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"5"</span>&gt;</span>2 of 3 (wider)<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>3 of 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<h3 id="variable-width-content" class="bv-no-focus-ring"><span class="bd-content-title">可变宽度内容<a class="anchorjs-link" href="#variable-width-content" aria-labelledby="variable-width-content"></a></span></h3>
<p>
  使用<code translate="no" class="notranslate text-nowrap">{breakpoint}="auto"</code>属性可以根据其内容的自然宽度来调整列的大小。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-grid-variable-width notranslate">
<div class="bv-example-row container">
<div class="row justify-content-md-center">
<div class="col-lg-2 col">1 of 3</div>
<div class="col-md-auto col-12">Variable width content</div>
<div class="col-lg-2 col">3 of 3</div>
</div>
<div class="row">
<div class="col">1 of 3</div>
<div class="col-md-auto col-12">Variable width content</div>
<div class="col-lg-2 col">3 of 3</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"justify-content-md-center"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">col</span> <span class="hljs-attr">lg</span>=<span class="hljs-string">"2"</span>&gt;</span>1 of 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"12"</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"auto"</span>&gt;</span>Variable width content<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">col</span> <span class="hljs-attr">lg</span>=<span class="hljs-string">"2"</span>&gt;</span>3 of 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>1 of 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"12"</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"auto"</span>&gt;</span>Variable width content<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">col</span> <span class="hljs-attr">lg</span>=<span class="hljs-string">"2"</span>&gt;</span>3 of 3<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<h2 id="responsive-classes" class="bv-no-focus-ring"><span class="bd-content-title">响应类<a class="anchorjs-link" href="#responsive-classes" aria-labelledby="responsive-classes"></a></span></h2>
<p>Bootstrap的网格包括五层预定义的类，用于构建复杂的响应式布局。 在您认为合适的超小型，小型，中型，大型或超大型设备上自定义列的大小。</p>
<h3 id="all-breakpoints" class="bv-no-focus-ring"><span class="bd-content-title">所有断点<a class="anchorjs-link" href="#all-breakpoints" aria-labelledby="all-breakpoints"></a></span></h3>
<p>
  对于从最小的设备到最大的设备相同的网格，请使用<code translate="no" class="notranslate text-nowrap">col</code>和
  <code translate="no" class="notranslate text-nowrap">cols="*"</code>属性。 当需要特殊大小的列时，请指定多个列数； 
  否则，请坚持使用<code translate="no" class="notranslate text-nowrap">col</code>（如果未指定<code translate="no" class="notranslate text-nowrap">cols</code>，则会自动应用）。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-grid-size-all-breakpoints notranslate">
<div class="bv-example-row container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>col<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>col<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>col<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>col<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"8"</span>&gt;</span>col-8<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"4"</span>&gt;</span>col-4<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<h3 id="stacked-to-horizontal" class="bv-no-focus-ring"><span class="bd-content-title">堆叠到水平<a class="anchorjs-link" href="#stacked-to-horizontal" aria-labelledby="stacked-to-horizontal"></a></span></h3>
<p>
  使用一组<code translate="no" class="notranslate text-nowrap">sm="*"</code> or <code translate="no" class="notranslate text-nowrap">或</code>（布尔值，表示相等宽度的@sm）属性，您可以创建一个基本的网格系统，该系统开始堆叠在超小型设备上，然后在台式机（中型）上变为水平设备。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-grid-horizontal-stacked notranslate">
<div class="bv-example-row container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"8"</span>&gt;</span>col-sm-8<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"4"</span>&gt;</span>col-sm-4<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>&gt;</span>col-sm<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>&gt;</span>col-sm<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>&gt;</span>col-sm<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<h3 id="mix-and-match" class="bv-no-focus-ring"><span class="bd-content-title">混搭<a class="anchorjs-link" href="#mix-and-match" aria-labelledby="mix-and-match"></a></span></h3>
<p>不希望您的列简单地堆叠在一些网格层中？根据需要为每层使用不同的属性组合。请参阅下面的示例，以更好地了解它是如何工作的。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-grid-mix-and-match notranslate">
<div class="bv-example-row container">
<div class="row">
<div class="col-md-8 col-12">cols="12" md="8"</div>
<div class="col-md-4 col-6">cols="6" md="4"</div>
</div>
<div class="row">
<div class="col-md-4 col-6">cols="6" md="4"</div>
<div class="col-md-4 col-6">cols="6" md="4"</div>
<div class="col-md-4 col-6">cols="6" md="4"</div>
</div>
<div class="row">
<div class="col-6">cols="6"</div>
<div class="col-6">cols="6"</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row"</span>&gt;</span>
  <span class="hljs-comment">&lt;!-- Stack the columns on mobile by making one full-width and the other half-width --&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"12"</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"8"</span>&gt;</span>cols="12" md="8"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"4"</span>&gt;</span>cols="6" md="4"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-comment">&lt;!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"4"</span>&gt;</span>cols="6" md="4"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"4"</span>&gt;</span>cols="6" md="4"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"4"</span>&gt;</span>cols="6" md="4"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-comment">&lt;!-- Columns are always 50% wide, on mobile and desktop --&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"6"</span>&gt;</span>cols="6"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"6"</span>&gt;</span>cols="6"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<h2 id="alignment" class="bv-no-focus-ring"><span class="bd-content-title">对齐<a class="anchorjs-link" href="#alignment" aria-labelledby="alignment"></a></span></h2>
<p>使用flexbox对齐实用程序垂直和水平对齐列。</p>
<h3 id="vertical-alignment" class="bv-no-focus-ring"><span class="bd-content-title">垂直对齐<a class="anchorjs-link" href="#vertical-alignment" aria-labelledby="vertical-alignment"></a></span></h3>
<div translate="translate" class="bd-example vue-example vue-example-b-grid-vertical-alignment notranslate">
<div class="bv-example-row bv-example-row-flex-cols container">
<div class="row align-items-start">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
<div class="row align-items-center">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
<div class="row align-items-end">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row bv-example-row-flex-cols"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">align-v</span>=<span class="hljs-string">"start"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>One of three columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>One of three columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>One of three columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">align-v</span>=<span class="hljs-string">"center"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>One of three columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>One of three columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>One of three columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">align-v</span>=<span class="hljs-string">"end"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>One of three columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>One of three columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>One of three columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<div translate="translate" class="bd-example vue-example vue-example-b-grid-align-self notranslate">
<div class="bv-example-row bv-example-row-flex-cols container">
<div class="row">
<div class="col align-self-start">One of three columns</div>
<div class="col align-self-center">One of three columns</div>
<div class="col align-self-end">One of three columns</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row bv-example-row-flex-cols"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">align-self</span>=<span class="hljs-string">"start"</span>&gt;</span>One of three columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">align-self</span>=<span class="hljs-string">"center"</span>&gt;</span>One of three columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">align-self</span>=<span class="hljs-string">"end"</span>&gt;</span>One of three columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<h3 id="horizontal-alignment" class="bv-no-focus-ring"><span class="bd-content-title">水平对齐<a class="anchorjs-link" href="#horizontal-alignment" aria-labelledby="horizontal-alignment"></a></span></h3>
<div translate="translate" class="bd-example vue-example vue-example-b-grid-horizontal-alignment notranslate">
<div class="bv-example-row container">
<div class="row justify-content-start">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<div class="row justify-content-center">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<div class="row justify-content-end">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<div class="row justify-content-around">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<div class="row justify-content-between">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">align-h</span>=<span class="hljs-string">"start"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"4"</span>&gt;</span>One of two columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"4"</span>&gt;</span>One of two columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">align-h</span>=<span class="hljs-string">"center"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"4"</span>&gt;</span>One of two columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"4"</span>&gt;</span>One of two columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">align-h</span>=<span class="hljs-string">"end"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"4"</span>&gt;</span>One of two columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"4"</span>&gt;</span>One of two columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">align-h</span>=<span class="hljs-string">"around"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"4"</span>&gt;</span>One of two columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"4"</span>&gt;</span>One of two columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">align-h</span>=<span class="hljs-string">"between"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"4"</span>&gt;</span>One of two columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"4"</span>&gt;</span>One of two columns<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<h2 id="reordering" class="bv-no-focus-ring"><span class="bd-content-title">重新排序<a class="anchorjs-link" href="#reordering" aria-labelledby="reordering"></a></span></h2>
<h3 id="ordering-columns" class="bv-no-focus-ring"><span class="bd-content-title">排序列<a class="anchorjs-link" href="#ordering-columns" aria-labelledby="ordering-columns"></a></span></h3>
<p>
  使用<code translate="no" class="notranslate text-nowrap">order-*</code>属性来控制内容的视觉顺序。这些属性具有响应能力，因此您可以按断点设置顺序
  （例如，<code translate="no" class="notranslate text-nowrap">order="1" order-md="2"</code>）。 包括对所有五个网格层的1到12的支持。 
  <code translate="no" class="notranslate text-nowrap">&lt;b-col&gt;</code>默认为order值<code translate="no" class="notranslate text-nowrap">0</code>。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-grid-order notranslate">
<div class="bv-example-row container-fluid">
<div class="row mb-3">
<div class="col">First in DOM, no order applied</div>
<div class="col order-5">Second in DOM, with a larger order</div>
<div class="col order-1">Third in DOM, with an order of 1</div>
</div>
<div class="row mb-3">
<div class="col order-6">First in DOM, with order of 6</div>
<div class="col order-1">Second in DOM, with an order of 1</div>
<div class="col">Third in DOM, no order applied</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-3"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>First in DOM, no order applied<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">order</span>=<span class="hljs-string">"5"</span>&gt;</span>Second in DOM, with a larger order<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">order</span>=<span class="hljs-string">"1"</span>&gt;</span>Third in DOM, with an order of 1<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-3"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">order</span>=<span class="hljs-string">"6"</span>&gt;</span>First in DOM, with order of 6<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">order</span>=<span class="hljs-string">"1"</span>&gt;</span>Second in DOM, with an order of 1<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Third in DOM, no order applied<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<p>
  <code translate="no" class="notranslate text-nowrap">order</code>由flexbox的CSS样式顺序控制。
</p>
<h3 id="offsetting-columns" class="bv-no-focus-ring"><span class="bd-content-title">偏移列<a class="anchorjs-link" href="#offsetting-columns" aria-labelledby="offsetting-columns"></a></span></h3>
<p>
  可以通过两种方式偏移网格列：响应<code translate="no" class="notranslate text-nowrap">offset-*</code>属性或
  <a href="../../../bootstrap-vue/docs/reference/spacing-classes" class="font-weight-bold">边距</a>实用程序类。
  网格<code translate="no" class="notranslate text-nowrap">offset-*</code>属性的大小与列匹配，而边距实用程序类对于偏移宽度可变的快速布局更有用。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-grid-offset notranslate">
<div class="bv-example-row container-fluid">
<div class="row">
<div class="col-md-4">md="4"</div>
<div class="col-md-4 offset-md-4">md="4" offset-md="4"</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">md="3" offset-md="3"</div>
<div class="col-md-3 offset-md-3">md="3" offset-md="3"</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">md="6" offset-md="3"</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"4"</span>&gt;</span>md="4"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"4"</span> <span class="hljs-attr">offset-md</span>=<span class="hljs-string">"4"</span>&gt;</span>md="4" offset-md="4"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">offset-md</span>=<span class="hljs-string">"3"</span>&gt;</span>md="3" offset-md="3"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">offset-md</span>=<span class="hljs-string">"3"</span>&gt;</span>md="3" offset-md="3"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">offset-md</span>=<span class="hljs-string">"3"</span>&gt;</span>md="6" offset-md="3"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<p>
  除了在响应断点处清除列之外，还可能需要通过在较大断点处将偏移量设置为<code translate="no" class="notranslate text-nowrap">0</code>来重置偏移量：
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-grid-offset-reset notranslate">
<div class="bv-example-row container-fluid">
<div class="row">
<div class="col-sm-5 col-md-6">sm="5" md="6"</div>
<div class="col-sm-5 col-md-6 offset-sm-2 offset-md-0">sm="5" offset-sm="2" md="6" offset-md="0"</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">sm="6" md="5" lg="6"</div>
<div class="col-sm-6 col-md-5 col-lg-6 offset-md-2 offset-lg-0">sm="6" md="5" offset-md="2" col-lg="6" offset-lg="0"</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"5"</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"6"</span>&gt;</span>sm="5" md="6"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"5"</span> <span class="hljs-attr">offset-sm</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">offset-md</span>=<span class="hljs-string">"0"</span>&gt;</span>sm="5" offset-sm="2" md="6" offset-md="0"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"5"</span> <span class="hljs-attr">lg</span>=<span class="hljs-string">"6"</span>&gt;</span>sm="6" md="5" lg="6"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"5"</span> <span class="hljs-attr">offset-md</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">lg</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">offset-lg</span>=<span class="hljs-string">"0"</span>&gt;</span>sm="6" md="5" offset-md="2" col-lg="6" offset-lg="0"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<h3 id="margin-utilities-on-columns" class="bv-no-focus-ring"><span class="bd-content-title">列上的边距实用程序<a class="anchorjs-link" href="#margin-utilities-on-columns" aria-labelledby="margin-utilities-on-columns"></a></span></h3>
<p>
  通过在Bootstrap v4中移至flexbox，您可以使用<a href="../../../bootstrap-vue/docs/reference/spacing-classes" class="font-weight-bold">margin 和 spacing</a>实用程序类
  （如<code translate="no" class="notranslate text-nowrap">.mr-auto</code>）来迫使同级列彼此分离。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-grid-margins notranslate">
<div class="text-light text-center container-fluid">
<div class="row mb-3">
<div class="p-3 bg-info col-md-4">md="4"</div>
<div class="ml-auto p-3 bg-info col-md-4">md="4" .ml-auto</div>
</div>
<div class="row mb-3">
<div class="ml-md-auto p-3 bg-info col-md-3">md="3" .ml-md-auto</div>
<div class="ml-md-auto p-3 bg-info col-md-3">md="3" .ml-md-auto</div>
</div>
<div class="row">
<div class="mr-auto p-3 bg-info col-auto">cols="auto" .mr-auto</div>
<div class="p-3 bg-info col-auto">cols="auto"</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-light text-center"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-3"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"4"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-3 bg-info"</span>&gt;</span>md="4"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"4"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ml-auto p-3 bg-info"</span>&gt;</span>md="4" .ml-auto<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-3"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ml-md-auto p-3 bg-info"</span>&gt;</span>md="3" .ml-md-auto<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ml-md-auto p-3 bg-info"</span>&gt;</span>md="3" .ml-md-auto<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"auto"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mr-auto p-3 bg-info"</span>&gt;</span>cols="auto" .mr-auto<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"auto"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-3 bg-info"</span>&gt;</span>cols="auto"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<h2 id="nesting-grids" class="bv-no-focus-ring"><span class="bd-content-title">嵌套网格<a class="anchorjs-link" href="#nesting-grids" aria-labelledby="nesting-grids"></a></span></h2>
<p>
  要将内容与默认网格嵌套，请在现有的<code translate="no" class="notranslate text-nowrap">&lt;b-col&gt;</code>组件内
  添加一个新的<code translate="no" class="notranslate text-nowrap">&lt;b-row&gt;</code>和一组<code translate="no" class="notranslate text-nowrap">&lt;b-col&gt;</code>组件。 嵌套行应包括一组总计不超过12个或更少的列（不需要全部使用12个可用列）。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-grid-nesting notranslate">
<div class="bv-example-row container-fluid">
<div class="row">
<div class="col-sm-9"> Level 1: sm="9"
<div class="row">
<div class="col-sm-6 col-8">Level 2: cols="8" sm="6"</div>
<div class="col-sm-6 col-4">Level 2: cols="4" sm="6"</div>
</div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"9"</span>&gt;</span>
      Level 1: sm="9"
      <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"8"</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"6"</span>&gt;</span>Level 2: cols="8" sm="6"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"4"</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"6"</span>&gt;</span>Level 2: cols="4" sm="6"<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<h2 id="row-columns" class="bv-no-focus-ring"><span class="bd-content-title">行列<a class="anchorjs-link" href="#row-columns" aria-labelledby="row-columns"></a></span></h2>
<p><span class="badge badge-info small">Requires Bootstrap v4.4+ CSS</span></p>
<p>
  使用<code translate="no" class="notranslate text-nowrap">&lt;b-row&gt;</code>中的响应式<code translate="no" class="notranslate text-nowrap">cols-*</code>属性可以快速设置最能呈现您的内容和布局的列数。
  普通的列宽适用于各个<code translate="no" class="notranslate text-nowrap">&lt;b-col&gt;</code>列
  （例如，<code translate="no" class="notranslate text-nowrap">&lt;b-col md="4"&gt;</code>），而行列<code translate="no" class="notranslate text-nowrap">col-*</code>属性
  在父级<code translate="no" class="notranslate text-nowrap">&lt;b-row&gt;</code>上设置为快捷方式 。
</p>
<p>
  使用这些行列可以快速创建基本的网格布局或控制您的卡片布局。 Bootstrap v4.4中默认的最大行列数是<code translate="no" class="notranslate text-nowrap">6</code>
  （不同于常规的列，默认行数最多为<code translate="no" class="notranslate text-nowrap">12</code>列）
</p>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-row&gt;</code>属性中指定的值是每行要创建的列数
  （而<code translate="no" class="notranslate text-nowrap">&lt;b-col&gt;</code>上的属性指的是要占用的列数）。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-grid-row-cols-introduction notranslate">
<div class="bv-example-row mb-3 container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="bv-example-row mb-3 container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="bv-example-row mb-3 container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="bv-example-row container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row mb-3"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row mb-3"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"3"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row mb-3"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"4"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"4"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"6"</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<p>
  您可以通过以下<code translate="no" class="notranslate text-nowrap">&lt;b-row&gt;</code>属性控制每个断点级别的列数：
</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">cols</code> for <code translate="no" class="notranslate text-nowrap">xs</code> and up screens</li>
<li><code translate="no" class="notranslate text-nowrap">cols-sm</code> for <code translate="no" class="notranslate text-nowrap">sm</code> and up screens</li>
<li><code translate="no" class="notranslate text-nowrap">cols-md</code> for <code translate="no" class="notranslate text-nowrap">md</code> and up screens</li>
<li><code translate="no" class="notranslate text-nowrap">cols-lg</code> for <code translate="no" class="notranslate text-nowrap">lg</code> and up screens</li>
<li><code translate="no" class="notranslate text-nowrap">cols-xl</code> for <code translate="no" class="notranslate text-nowrap">xl</code> and up screens</li>
</ul>
<div translate="translate" class="bd-example vue-example vue-example-b-grid-row-cols-breakpoints notranslate">
<div class="bv-example-row container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 row-cols-lg-6">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bv-example-row"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">cols-sm</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">cols-md</span>=<span class="hljs-string">"4"</span> <span class="hljs-attr">cols-lg</span>=<span class="hljs-string">"6"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>Column<span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre></figure>
<h2 id="utilities-for-layout" class="bv-no-focus-ring"><span class="bd-content-title">布局实用程序<a class="anchorjs-link" href="#utilities-for-layout" aria-labelledby="utilities-for-layout"></a></span></h2>
<p>
  为了更快地进行适合移动设备的响应式开发，Bootstrap包含了数十种<a href="../../../bootstrap-vue/docs/reference/utility-classes" class="font-weight-bold">实用程序类</a>，用于显示，隐藏，对齐和分隔内容。
</p>
<h3 id="changing-display" class="bv-no-focus-ring"><span class="bd-content-title">变更 <code translate="no" class="notranslate text-nowrap">display</code><a class="anchorjs-link" href="#changing-display" aria-labelledby="changing-display"></a></span></h3>
<p>
  使用Bootstrap<a href="../../../bootstrap-vue/docs/reference/utility-classes" class="font-weight-bold">显示实用程序</a> 
  以响应方式切换<code translate="no" class="notranslate text-nowrap">display</code>属性的通用值。 将其与网格系统，内容或组件混合以在特定视口中显示或隐藏它们。
</p>
<h3 id="flexbox-options" class="bv-no-focus-ring"><span class="bd-content-title">Flexbox 选项<a class="anchorjs-link" href="#flexbox-options" aria-labelledby="flexbox-options"></a></span></h3>
<p>
  Bootstrap 4是使用flexbox构建的，但并非每个元素的code translate="no" class="notranslate text-nowrap">display</code>
  都已更改为<code translate="no" class="notranslate text-nowrap">display: flex</code>，因为这会添加许多不必要的替代内容，并且会意外更改关键的浏览器行为。 大多数组件都是在启用flexbox的情况下构建的。
</p>
<p>
  如果您需要在元素上添加<code translate="no" class="notranslate text-nowrap">display: flex</code>，请使用<code translate="no" class="notranslate text-nowrap">.d-flex</code>或
  自适应变体之一（例如<code translate="no" class="notranslate text-nowrap">.d-sm-flex</code>）。您将需要此类或<code translate="no" class="notranslate text-nowrap">显示</code>值，
  以允许使用额外的<a href="../../../bootstrap-vue/docs/reference/utility-classes" class="font-weight-bold">flexbox 实用程序</a>来调整大小，对齐，间隔等。
</p>
<h3 id="margin-and-padding" class="bv-no-focus-ring"><span class="bd-content-title">边距和填充<a class="anchorjs-link" href="#margin-and-padding" aria-labelledby="margin-and-padding"></a></span></h3>
<p>
  使用<code translate="no" class="notranslate text-nowrap">margin</code>和
  <code translate="no" class="notranslate text-nowrap">padding</code>
  <a href="../../../bootstrap-vue/docs/reference/utility-classes" class="font-weight-bold">间距实用程序</a>来控制元素和组件的间距和大小。
  Bootstrap 4基于<code translate="no" class="notranslate text-nowrap">1rem</code>值默认SASS <code translate="no" class="notranslate text-nowrap">$spacer</code>变量，
  包括五个级别的间距实用程序。 选择所有视口的值（例如，<code translate="no" class="notranslate text-nowrap">.mr-3</code>的
  <code translate="no" class="notranslate text-nowrap">margin-right: 1rem</code>），或选择响应变体以特定视口为目标（
  例如，<code translate="no" class="notranslate text-nowrap">.mr-md-3</code>的<code translate="no" class="notranslate text-nowrap">margin-right: 1rem</code>从
  <code translate="no" class="notranslate text-nowrap">md</code>断点开始）。
</p>
<h3 id="toggle-visibility" class="bv-no-focus-ring"><span class="bd-content-title">切换<code translate="no" class="notranslate text-nowrap">可见性</code><a class="anchorjs-link" href="#toggle-visibility" aria-labelledby="toggle-visibility"></a></span></h3>
<p>
  当不需要切换<code translate="no" class="notranslate text-nowrap">display</code>时，
  可以使用<a href="../../../bootstrap-vue/docs/reference/utility-classes" class="font-weight-bold">可见性实用程序类</a>来切换元素的<code translate="no" class="notranslate text-nowrap">visibility</code>。
   不可见的元素仍然会影响页面的布局，但在视觉上对访问者是隐藏的。
</p>
<!-- Component reference added automatically from component package.json -->

<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a href="../../../bootstrap-vue/docs/components/layout#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-container" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-container&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/layout#comp-ref-b-container" class="anchorjs-link" aria-labelledby="comp-ref-b-container" target="_self"></a></span></h3>
<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能部件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/layout/container.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-container-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-container&gt;</code> 属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-container-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/layout#comp-ref-b-container-props" class="anchorjs-link" aria-labelledby="comp-ref-b-container-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__1876">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="tag" class="" id="__BVID__1876__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'div'</code></td>
<td aria-colindex="4" role="cell" class="">指定要呈现的HTML标记，而不是默认标记</td>
</tr>
<tr role="row" data-pk="fluid" class="" id="__BVID__1876__row_fluid">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">fluid</code></td>
<td aria-colindex="2" role="cell" class="">Boolean or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  当设置为true时，使行始终为100%宽，或设置为100%宽直至断点的引导断点名称之一（对于断点特定值，需要引导v4.4+CSS）</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-row" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-row&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/layout#comp-ref-b-row" class="anchorjs-link" aria-labelledby="comp-ref-b-row" target="_self"></a></span></h3>
<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能部件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/layout/row.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-row-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-row&gt;</code> 属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-row-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/layout#comp-ref-b-row-props" class="anchorjs-link" aria-labelledby="comp-ref-b-row-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__1893">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (单击可升序排序)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="tag" class="" id="__BVID__1893__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'div'</code></td>
<td aria-colindex="4" role="cell" class="">指定要呈现的HTML标记，而不是默认标记</td>
</tr>
<tr role="row" data-pk="no-gutters" class="" id="__BVID__1893__row_no-gutters">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-gutters</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，从行中移除边距并从子列中移除填充</td>
</tr>
<tr role="row" data-pk="align-v" class="" id="__BVID__1893__row_align-v">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">align-v</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">一行中所有列的垂直对齐方式：“开始”、“居中”或“结束”</td>
</tr>
<tr role="row" data-pk="align-h" class="" id="__BVID__1893__row_align-h">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">align-h</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">所有列的水平对齐/间距：“开始”，“中心”，“结束”，“周围”或“中间”</td>
</tr>
<tr role="row" data-pk="align-content" class="" id="__BVID__1893__row_align-content">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">align-content</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">
  在横轴上将列项目对齐在一起：“开始”，“中心”，“结束”，“周围”，“之间”或“拉伸”。 对单行项目没有影响</td>
</tr>
<tr role="row" data-pk="cols" class="" id="__BVID__1893__row_cols">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">cols</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.2.0+</span></td>
<td aria-colindex="2" role="cell" class="">String or Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在“ xs”断点处创建的数字行列。 需要Bootstrap v4.4 CSS</td>
</tr>
<tr role="row" data-pk="cols-sm" class="" id="__BVID__1893__row_cols-sm">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">cols-sm</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.2.0+</span></td>
<td aria-colindex="2" role="cell" class="">String or Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在“ sm”断点处创建的数字行列。 需要Bootstrap v4.4 CSS</td>
</tr>
<tr role="row" data-pk="cols-md" class="" id="__BVID__1893__row_cols-md">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">cols-md</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.2.0+</span></td>
<td aria-colindex="2" role="cell" class="">String or Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在“ md”断点处创建的数字行列。 需要Bootstrap v4.4 CSS</td>
</tr>
<tr role="row" data-pk="cols-lg" class="" id="__BVID__1893__row_cols-lg">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">cols-lg</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.2.0+</span></td>
<td aria-colindex="2" role="cell" class="">String or Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在'lg'断点处创建的数字行列。 需要Bootstrap v4.4 CSS</td>
</tr>
<tr role="row" data-pk="cols-xl" class="" id="__BVID__1893__row_cols-xl">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">cols-xl</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.2.0+</span></td>
<td aria-colindex="2" role="cell" class="">String or Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在“ xl”断点处创建的数字行列。 需要Bootstrap v4.4 CSS</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-col" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-col&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/layout#comp-ref-b-col" class="anchorjs-link" aria-labelledby="comp-ref-b-col" target="_self"></a></span></h3>
<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能部件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/layout/col.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-col-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-col&gt;</code> 属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-col-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/layout#comp-ref-b-col-props" class="anchorjs-link" aria-labelledby="comp-ref-b-col-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__1918">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (点击排序升序)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="col" class="" id="__BVID__1918__row_col">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">col</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">如果为true，则使xs和向上断点的宽度相等的列网格单元格跨度</td>
</tr>
<tr role="row" data-pk="cols" class="" id="__BVID__1918__row_cols">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">cols</code></td>
<td aria-colindex="2" role="cell" class="">String or Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">网格单元格跨xs和向上断点的列数</td>
</tr>
<tr role="row" data-pk="sm" class="" id="__BVID__1918__row_sm">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">sm</code></td>
<td aria-colindex="2" role="cell" class="">Boolean or String or Number</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">网格单元格跨越sm和向上断点的列数</td>
</tr>
<tr role="row" data-pk="md" class="" id="__BVID__1918__row_md">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">md</code></td>
<td aria-colindex="2" role="cell" class="">Boolean or String or Number</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">网格单元格跨越md和上断点的列数</td>
</tr>
<tr role="row" data-pk="lg" class="" id="__BVID__1918__row_lg">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">lg</code></td>
<td aria-colindex="2" role="cell" class="">Boolean or String or Number</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">网格单元格跨越lg和上断点的列数</td>
</tr>
<tr role="row" data-pk="xl" class="" id="__BVID__1918__row_xl">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">xl</code></td>
<td aria-colindex="2" role="cell" class="">Boolean or String or Number</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">网格单元格跨xl和向上断点的列数</td>
</tr>
<tr role="row" data-pk="offset" class="" id="__BVID__1918__row_offset">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">offset</code></td>
<td aria-colindex="2" role="cell" class="">String or Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">网格单元在xs和向上断点处偏移的列数</td>
</tr>
<tr role="row" data-pk="offset-sm" class="" id="__BVID__1918__row_offset-sm">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">offset-sm</code></td>
<td aria-colindex="2" role="cell" class="">String or Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">网格单元格为sm和向上断点偏移的列数</td>
</tr>
<tr role="row" data-pk="offset-md" class="" id="__BVID__1918__row_offset-md">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">offset-md</code></td>
<td aria-colindex="2" role="cell" class="">String or Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">网格单元格为md和上断点偏移的列数</td>
</tr>
<tr role="row" data-pk="offset-lg" class="" id="__BVID__1918__row_offset-lg">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">offset-lg</code></td>
<td aria-colindex="2" role="cell" class="">String or Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">lg和向上断点偏移的网格单元格的列数</td>
</tr>
<tr role="row" data-pk="offset-xl" class="" id="__BVID__1918__row_offset-xl">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">offset-xl</code></td>
<td aria-colindex="2" role="cell" class="">String or Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">网格单元格针对xl和上断点偏移的列数</td>
</tr>
<tr role="row" data-pk="order" class="" id="__BVID__1918__row_order">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">order</code></td>
<td aria-colindex="2" role="cell" class="">String or Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">针对xs和向上断点的网格单元的弹性顺序</td>
</tr>
<tr role="row" data-pk="order-sm" class="" id="__BVID__1918__row_order-sm">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">order-sm</code></td>
<td aria-colindex="2" role="cell" class="">String or Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于sm和向上断点的网格单元的弹性顺序</td>
</tr>
<tr role="row" data-pk="order-md" class="" id="__BVID__1918__row_order-md">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">order-md</code></td>
<td aria-colindex="2" role="cell" class="">String or Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">md和上断点的网格单元的弹性顺序</td>
</tr>
<tr role="row" data-pk="order-lg" class="" id="__BVID__1918__row_order-lg">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">order-lg</code></td>
<td aria-colindex="2" role="cell" class="">String or Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">lg和上断点的网格单元的弹性顺序</td>
</tr>
<tr role="row" data-pk="order-xl" class="" id="__BVID__1918__row_order-xl">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">order-xl</code></td>
<td aria-colindex="2" role="cell" class="">String or Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">针对xl和更高断点的网格单元的伸缩顺序</td>
</tr>
<tr role="row" data-pk="align-self" class="" id="__BVID__1918__row_align-self">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">align-self</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">网格单元相对于行的垂直对齐：“开始”，“中心”或“结束”</td>
</tr>
<tr role="row" data-pk="tag" class="" id="__BVID__1918__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'div'</code></td>
<td aria-colindex="4" role="cell" class="">指定要呈现的HTML标签，而不是默认标签</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-form-row" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-form-row&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/layout#comp-ref-b-form-row" class="anchorjs-link" aria-labelledby="comp-ref-b-form-row" target="_self"></a></span></h3>
<a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary">  功能部件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/layout/form-row.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-row-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-row&gt;</code> 属性 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-row-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/layout#comp-ref-b-form-row-props" class="anchorjs-link" aria-labelledby="comp-ref-b-form-row-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__1951">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="tag" class="" id="__BVID__1951__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'div'</code></td>
<td aria-colindex="4" role="cell" class="">指定要呈现的HTML标记，而不是默认标记</td>
</tr>
</tbody>
</table>
</div>
</article>
<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件<a href="../../../bootstrap-vue/docs/components/layout#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p>您可以通过以下命名的导出将单个组件导入到项目中：</p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__1963">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组成部分</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名导出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-container&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BContainer</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-row&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BRow</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-col&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BCol</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-form-row&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BFormRow</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>例子:</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BContainer } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-container'</span>, BContainer)</pre></figure>
</article>
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入为Vue.js插件 <a href="../../../bootstrap-vue/docs/components/layout#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p>该插件包括上面列出的所有单个组件。 插件还包括任何组件别名。</p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__1976">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名导出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">LayoutPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>例子:</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { LayoutPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(LayoutPlugin)</pre></figure>






</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
